<template>
    <div class="container">
        <template>
            <el-table :data="videoList.list" style="width: 100%" stripe border v-loading="loading">
                <el-table-column prop="vid" label="كىنو تەرتىپى">
                </el-table-column>
                <el-table-column prop="title" label="كىنو ئىسمى">
                </el-table-column>
                <el-table-column prop="videoUrl" label="كىنو ئادىرىسى" style="height:30px;">
                    <template slot-scope="scope">
                        <a style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap;" target="_blank" :href="scope.row.videoUrl">{{scope.row.videoUrl}}</a>
                        <el-button v-clipboard:copy="scope.row.videoUrl" v-clipboard:success="copySuccess" v-clipboard:error="copyError" size="small" round type="success">كۆچۈرۈش</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="coverImg" label="رەسىم ئادىرىسى">
                    <template slot-scope="scope">
                        <el-image lazy :src="scope.row.coverImg"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="قاتقان ۋاقتى">
                    <template slot-scope="scope">
                        <span>{{moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="تۈرى">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.sort" disabled placeholder="" v-if="scope.row.sort!=null">
                            <el-option v-for="item in sortList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="كىنو،تىياتېر">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.type" disabled placeholder="" v-if="scope.row.type!=null">
                            <el-option v-for="item in typeList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="VIP">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.isVip" disabled placeholder="" v-if="scope.row.isVip!=null">
                            <el-option v-for="item in isVipList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="isFree" label="ھەقسىز">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.isFree" disabled placeholder="" v-if="scope.row.isFree!=null">
                            <el-option v-for="item in isFreeList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="isNew" label="يېڭى">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.isNew" disabled placeholder="" v-if="scope.row.isNew!=null">
                            <el-option v-for="item in isNewList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="isTv" label="تىياتىر">
                </el-table-column> -->
                <el-table-column prop="price" label="باھاسى">
                    <template slot-scope="scope">
                        {{scope.row.price?scope.row.price:0}}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="v_xh" label="地址">
                </el-table-column> -->
                <el-table-column width="300" fixed="right" label="باشقۇرۇش">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" @click="update(scope.row)">تەھرىرلەش</el-button>
                        <el-button type="danger" size="small" @click="deleteVideo(scope.row)">يۇيۇش</el-button>
                        <el-button type="info" size="small" v-if="scope.row.type==1" @click="multiHandle(scope.row)">كۆپلەپ يېڭىلاش</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="center" style="margin:15px 0;">
                <el-col :span="8"></el-col>
                <el-col :span="8">
                    <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="videoList.total" @current-change="handleCurrentChange">
                    </el-pagination>
                </el-col>
                <el-col :span="8"></el-col>
            </el-row>

            <!-- 修改弹窗 -->
            <el-dialog title="كىنو تەھرىرلەش" center :visible.sync="dialogVisible" width="40%" ref="dialog" @open="beforeOpen">
                <el-form :model="form" label-width="120px">
                    <el-form-item label="كىنو تەرتىپى :">
                        <span>{{form.vid}}</span>
                    </el-form-item>
                    <el-form-item label="كىنو ئىسمى :">
                        <!-- <span>{{form.title}}</span> -->
                        <el-row>
                            <el-col :span="18">
                                <el-input v-model="form.title" placeholder="كىنو ئىسمىنى كىرگۈزۈڭ"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="تىپى" prop="type">
                        <el-select v-model="form.type" placeholder="كىنو تىپىنى تاللاڭ">
                            <el-option v-for="item in typeList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="sort" label="تۈرى :">
                        <!-- <span>{{form.sort}}</span> -->
                        <el-select v-model="form.sort" placeholder="كىنو تۈرىنى تاللاڭ">
                            <el-option v-for="item in sortList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="كىنو ئادىرىسى :">
                        <el-row style="max-height:300px;overflow-y:auto;">
                            <el-col :span="24" v-if="form.type==1">
                                <!-- <el-input type="textarea" v-model"form.videoUrl" placeholder="كىنو ئاىرىسىنى كىرگۈزۈڭ"></el-input> -->
                                <el-row v-for="(item,index) in tvList" :key="item.id">
                                    <el-col :span="2">{{item.xh}}:</el-col>
                                    <el-col :span="12">
                                        <el-input size="small" v-model="item.url"></el-input>
                                    </el-col>
                                    <el-col :span="9" :push="1">
                                        <el-button type="warning" icon="el-icon-s-promotion" size="mini" @click="updateTV(item)" round>يېڭىلاش</el-button>
                                        <el-button type="danger" icon="el-icon-delete-solid" v-if="index==tvList.length-1" size="mini" @click="deleteQisim(item)" round>يۇيۇش</el-button>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="4">
                                        <el-button @click="addQisim" round size="small" type="primary" icon="el-icon-plus"></el-button>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-input v-model="newQisim" size="small"></el-input>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="18" v-else>
                                <el-input v-model="form.videoUrl" placeholder="كىنو ئاىرىسىنى كىرگۈزۈڭ"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item prop="coverImg" label="رەسىم ئادىرىسى :">
                        <el-row>
                            <el-col :span="18">
                                <el-input v-model="form.coverImg" placeholder="رەسىم ئاىرىسىنى كىرگۈزۈڭ"></el-input>
                            </el-col>
                            <el-col :span="4" :push="1">
                                <el-button type="success" @click="updateImg">يېڭىلاش</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="قاتقان ۋاقتى :">
                        <span>{{moment(form.create_time).format('YYYY-MM-DD HH:mm:ss')}}</span>
                    </el-form-item>

                    <el-form-item prop="isVip" label="VIP">
                        <el-select v-model="form.isVip" placeholder="VIP مۇ ئەمەس">
                            <el-option v-for="item in isVipList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="isFree" label="ھەقسىز :" v-if="form.isVip">
                        <el-select v-model="form.isFree" placeholder="كىنو تىپىنى تاللاڭ">
                            <el-option v-for="item in isFreeList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="isNew" label="يېڭى :">
                        <el-select v-model="form.isNew" placeholder="كىنو تىپىنى تاللاڭ">
                            <el-option v-for="item in isNewList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="price" label="باھاسى :" v-if="form.isVip">
                        <el-col :span="18">
                            <el-input type="number" v-model="form.price" placeholder="كىنونىڭ باھاسىنى كىرگۈزۈڭ"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-row>
                        <el-col :span="24" style="display:flex;justify-content:center">
                            <el-button icon="el-icon-video-camera" type="primary" v-if="form.type==1" @click="submitTv">يېڭىلاش</el-button>
                            <el-button icon="el-icon-s-promotion" type="primary" v-if="form.type==0" @click="onSubmit">يېڭىلاش</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
            <!-- 更新图片弹窗 -->
            <el-dialog title="رەسىم يېڭىلاش" :visible.sync="imgDialog" width="30%">
                <el-upload class="avatar-uploader" action="" :drag="true" :multiple="false" :file-list="images" :http-request="uploadHttp" :before-upload="beforeAvatarUpload" :on-remove="handleRemove" list-type="picture">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <div class="el-upload__tip" slot="tip">رەسىم سىغىمى 500كىلوبايتتىن ئېشىپ كەتسە بولمايدۇ</div>
                </el-upload>
            </el-dialog>
            <MultiUpdate :info="multiInfo" ref="multiupdate" />
        </template>
    </div>
</template>

<script>
import qs from "qs";
import ossClient from "./ali-oss";
import MultiUpdate from "./components/multiUpdate";
export default {
    name: "videoManage",
    components: { MultiUpdate },
    data() {
        return {
            pageNo: 1,
            pageSize: 20,
            videoList: [],
            moment: moment,
            dialogVisible: false,
            imgDialog: false,
            form: {},
            tvList: [], //电视剧的集结
            newQisim: "",
            typeList: [
                { label: "كىنو", value: 0 },
                { label: "قىسىملىق", value: 1 }
            ],
            sortList: [
                { label: "كىنو", value: "MOVIE" },
                { label: "قىسىملىق", value: "TV" },
                { label: "قىسقا فىلىم", value: "SHORT" },
                { label: "كۈلدۈرگە", value: "FUN" },
                { label: "تور فىلىملىرى", value: "NETTV" },
                { label: "سەنئەت", value: "VARIETY" },
                { label: "كارتون", value: "CARTOON" },
                { label: "ئۆزتىل", value: "LOCAL" }
            ],
            isFreeList: [
                { label: "پۇللۇق", value: 1 },
                { label: "ھەقسىز", value: 0 }
            ],
            isNewList: [
                { label: "يېڭى", value: 1 },
                { label: "كونا", value: 0 }
            ],
            isVipList: [
                { label: "VIP", value: 1 },
                { label: "ھەقسىز", value: 0 }
            ],
            images: [],
            uploadConf: {
                region: "oss-cn-beijing", //你的oss地址 ，具体位置见下图
                accessKeyId: "LTAI6UyguOroHfrG", //你的ak
                accessKeySecret: "9duOA4ULWG1Fhxuf4vuYccIXcSKZom", //你的secret
                //stsToken: '<Your securityToken(STS)>',//这里我暂时没用，注销掉
                bucket: "mars-kino" //你的oss名字
            },
            loading: false,
            multiInfo: {}
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        handleCurrentChange(page) {
            this.pageNo = page;
            this.getList();
        },
        async getList() {
            this.loading = true;
            let res = await this.$http.get(
                `/getVideoList?currentPage=${this.pageNo}&pageSize=${this.pageSize}`
            );
            this.videoList = res.data.data;
            this.loading = false;
        },
        update(data) {
            let f = data;
            this.form = {
                vid: f.vid,
                title: f.title,
                videoUrl: f.videoUrl,
                coverImg: f.coverImg,
                create_time: f.create_time,
                sort: f.sort,
                type: f.type,
                isFree: f.isFree,
                isNew: f.isNew,
                isVip: f.isVip,
                price: f.price
            };
            this.dialogVisible = true;
        },
        deleteVideo(row) {
            this.$confirm("يۇيامسىز?", "ئەسكەرتىش", {
                confirmButtonText: "ھەئە",
                cancelButtonText: "ياق",
                type: "warning"
            })
                .then(() => {
                    this.$http.get(`/deleteVideo?vid=${row.vid}`).then(res => {
                        this.$message.success("يۇيۇلدى");
                        this.getList();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        onSubmit() {
            this.$confirm("يېڭىلاشنى جەزملەشتۈرەمسىز")
                .then(_ => {
                    this.$http
                        .post("/updateVideoDetail", qs.stringify(this.form), {
                            headers: {
                                "Content-Type":
                                    "application/x-www-form-urlencoded"
                            }
                        })
                        .then(res => {
                            let status = res.data.data;
                            if (status.code == "001") {
                                this.$message.success(status.msg);
                                this.dialogVisible = false;
                                this.getList();
                            } else {
                                this.$message.error(status.msg);
                            }
                        });
                })
                .catch(_ => {});
        },
        // 更新封面图片
        updateImg() {
            this.imgDialog = true;
        },
        uploadHttp({ file }) {
            let self = this;
            let extName = file.name.split(".")[1];
            let imgName = "MarsVideo";
            const fileName = `${imgName}/${moment().format(
                "YYYYMMDDHHmmssSSS"
            )}.${extName}`; //定义唯一的文件名
            // console.log(fileName);
            ossClient(this.uploadConf)
                .put(fileName, file)
                .then(({ res, url, name }) => {
                    if (res && res.status == 200) {
                        self.form.coverImg = url;
                        self.imgDialog = false;
                        /* console.log(
                            `阿里云OSS上传图片成功回调`,
                            res,
                            url,
                            name
                        ); */
                        // ossClient.getObject(fileName)
                    }
                })
                .catch(err => {
                    console.log(`阿里云OSS上传图片失败回调`, err);
                });
        },
        beforeAvatarUpload(file) {
            const isJPEG = file.name.split(".")[1] === "jpeg";
            const isJPG = file.name.split(".")[1] === "jpg";
            const isPNG = file.name.split(".")[1] === "png";
            const isLt500K = file.size / 1024 / 500 < 2;
            if (!isJPG && !isJPEG && !isPNG) {
                this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
            }
            if (!isLt500K) {
                this.$message.error("单张图片大小不能超过 500KB!");
            }
            return (isJPEG || isJPG || isPNG) && isLt500K;
        },

        /**
         * 移除图片
         */
        handleRemove(file, fileList) {
            console.log(`移除图片回调`, fileList);
        },
        copyError() {
            this.$message.error("مەغلۇپ بولدى");
        },
        copySuccess() {
            this.$message.success("كۆچۈرۈلدى");
        },
        // 获取电视剧
        beforeOpen() {
            console.log(this.form.create_time);
            if (this.form.type == 1) {
                this.$http.get(`/getTV?vid=${this.form.vid}`).then(res => {
                    let list = res.data.data.list;
                    this.tvList = JSON.parse(list.qisim);
                    /* let urlStr = "";
                        for (let item of list) {
                            urlStr += `${item.videoUrl}\n`;
                        }
                        this.form.videoUrl = urlStr; */
                });
            }
        },
        addQisim() {
            this.tvList.push({
                vid: this.form.vid,
                xh: this.tvList.length + 1,
                videoUrl: this.newQisim
            });
            this.newQisim = "";
        },
        deleteQisim() {
            this.$nextTick(() => {
                this.tvList.pop();
            });
        },
        updateTV(item) {
            this.$http
                .post(
                    "/updateTv",
                    qs.stringify({
                        vid: item.vid,
                        id: item.id,
                        videoUrl: item.videoUrl
                    }),
                    {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        }
                    }
                )
                .then(res => {
                    if (res.data.data.code == "001") {
                        this.$message.success(res.data.data.msg);
                        this.beforeOpen();
                    }
                });
        },
        submitTv() {
            let urlList = this.tvList.reduce(
                (total, item, index) =>
                    total.concat({ xh: index + 1, url: item.url }),
                []
            );
            let f = {
                ...this.form,
                qisim: JSON.stringify(urlList)
            };
            this.$confirm("يېڭىلاشنى جەزملەشتۈرەمسىز")
                .then(_ => {
                    this.$http
                        .post("/updateVideoDetail", qs.stringify(f), {
                            headers: {
                                "Content-Type":
                                    "application/x-www-form-urlencoded"
                            }
                        })
                        .then(res => {
                            let status = res.data.data;
                            if (status.code == "001") {
                                this.$message.success(status.msg);
                                this.dialogVisible = false;
                                this.getList();
                            } else {
                                this.$message.error(status.msg);
                            }
                        });
                })
                .catch(_ => {});

            // console.log(this.tvList);
        },
        multiHandle(item) {
            // console.log(item);
            this.multiInfo = item;
            this.$refs.multiupdate.visible = true;
        }
    }
};
</script>

<style lang="scss" scoped>
</style>